import React from "react"
import topList from "./css/phb.module.css"
import songsList from './css/songslist.module.css'
import {login,getTjGd} from "../../api/index"

class Tuijian extends React.Component{
    constructor(props){
        super(props)
        this.state ={
            daliySongs:[]
        }
    }
    componentDidMount(){
        // login()
        // .then(body=>body.json())
        // .then(
            getTjGd()
            .then(body=>body.json())
            .then(res=>{
               this.setState({
                daliySongs:res.recommend
               })
            })
        // )
    }
    handleBack(){
        this.props.history.goBack()
    }
    jumpToBofang(id){
        this.props.history.push("/playmusic?id="+id)
    }
    render(){
        return(
            <div>
                <div className={topList.header}>
                        <div className={topList.back} onClick={this.handleBack.bind(this)}>
                            <svg t="1573891662627" className={topList.icon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9822" width="30" height="30"><path d="M766.862 1021.724c-10.24 0-20.594-3.64-28.444-10.922L228.693 538.396c-15.701-14.563-15.701-38.229 0-52.792L738.418 13.198c15.701-14.563 41.187-14.563 56.889 0 15.701 14.564 15.701 38.23 0 52.793L314.027 512l481.28 446.009c15.701 14.563 15.701 38.23 0 52.793-7.851 7.282-18.205 10.922-28.445 10.922z" fill="#666666" p-id="9823"></path></svg>
                        </div>
                        <div>
                            <h1>每日推荐</h1>
                        </div>
                        <div className={topList.bofang}>
                        <svg t="1573806248923" className={topList.icon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7780" width="40" height="40"><path d="M896 960c-23.6 0-42.7-19.1-42.7-42.7v-512c0-23.6 19.1-42.7 42.7-42.7s42.7 19.1 42.7 42.7v512c0 23.6-19.1 42.7-42.7 42.7z m-256 0c-23.6 0-42.7-19.1-42.7-42.7V490.7c0-23.6 19.1-42.7 42.7-42.7s42.7 19.1 42.7 42.7v426.7c0 23.5-19.1 42.6-42.7 42.6z m-256 0c-23.6 0-42.7-19.1-42.7-42.7V106.7c0-23.6 19.1-42.7 42.7-42.7s42.7 19.1 42.7 42.7v810.7c0 23.5-19.1 42.6-42.7 42.6z m-256 0c-23.6 0-42.7-19.1-42.7-42.7V618.7c0-23.6 19.1-42.7 42.7-42.7s42.7 19.1 42.7 42.7v298.7c0 23.5-19.1 42.6-42.7 42.6z" fill="#333333" p-id="7781"></path></svg>
                        </div>
                </div>
                <div className={songsList.list}>
                    {this.state.daliySongs.map((item,index)=>
                        <div onClick={this.jumpToBofang.bind(this,item.id)} key={index} className={songsList.song}>
                                <p>{index+1}</p>
                                <p>{item.name}</p>
                                <p>{item.artists[0].name}</p>
                        </div>
                    )}
                </div>
            </div>
        )
    }
}

export default Tuijian